<%@page import="VO.UsuarioVO"%>
<%@page import="Entidad.Tarea"%>
<%@page import="Entidad.Usuario"%>
<%@page import="VO.ActividadVO"%>
<%@page import="java.util.*"%>
<%@page import="VO.FlujoVO"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="Service.Helpers.CreateXMLFromDB"%>
<%@page import="Facade.FacadeFactory"%>
<%@page import="VO.ProyectoVO"%>
<%@page import="DAO.DAOFactory"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
    /*Datos que se supone deberia recoger la sesión*/
    String nombre = App.Sesion.getNombre();
    String apellido = App.Sesion.getApellido();
    String correo = App.Sesion.getCorreo();
    String proyecto = App.Sesion.getNombreProyecto();
    int idproyecto =  App.Sesion.getIdproyecto();
    ProyectoVO project = FacadeFactory.createFacade().showProject(idproyecto);
    SimpleDateFormat simpleDateformat=new SimpleDateFormat("yyyy-MM-dd");
    String date = simpleDateformat.format(project.getFechaInicio());
    String contenido = CreateXMLFromDB.createXML();
%>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Man&Uuml; - Registro</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link title="default" rel="stylesheet" href="Estilos/css/bootstrap.css" type="text/css" />
	<script src="Estilos/js/jquery.js"></script>
        <script src="Estilos/js/bootstrap.js"></script>
        <script src="Estilos/js/jquery.validate.min.js"></script>
        <link type="text/css" rel="stylesheet" href="gantt/codebase/dhtmlxgantt.css">
        <script type="text/javascript" language="JavaScript" src="gantt/codebase/dhtmlxcommon.js"></script>
        <script type="text/javascript" language="JavaScript" src="gantt/codebase/dhtmlxgantt.js"></script>
        <link rel="stylesheet" type="text/css" href="calendar/codebase/dhtmlxcalendar.css">
        <link rel="stylesheet" type="text/css" href="calendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
        <script src="calendar/codebase/dhtmlxcalendar.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            body{
                background: url('img/bg.png') 0px -100px repeat-x;
                margin: 30px 0 0 0;
            }
            label.error {
                color: red;
            }
        </style>
        <script language="JavaScript" type="text/javascript">
            var myCalendar;
            function createChartControl(htmlDiv1){

                var gantt = new GanttChart();
                gantt.setImagePath("gantt/codebase/imgs/");
                gantt.setEditable(false);    
                gantt.showTreePanel(true);
                gantt.showContextMenu(false);
                gantt.showDescTask(true,'p,n,e,d');// p - percentCompleted,n - name,e - est, d - duration
                gantt.showDescProject(true,'n,s,d,p');// p - percentCompleted,n - name,s - start date, d - duration
                gantt.create(htmlDiv1);   
                //gantt.loadData("gantt/data/data1.xml",true,true);
                gantt.loadData('<%=contenido %>', false, true);
                //gantt.loadData('<?xml version="1.0" encoding="UTF-8"?><projects><project id = "2" name= "Flujo de ingrid" startdate = "2013,07,10"><task id="2"><name>Actividad de ingrid</name><est>2013,10,08</est><duration>120</duration><percentcompleted>0</percentcompleted><predecessortasks></predecessortasks><childtasks></childtasks></task></project><project id = "3" name= "Flujo de ingrid" startdate = "2013,03,08"></project><project id = "5" name= "Flujoaspero" startdate = "2013,01,01"><task id="3"><name>Actividad de ingrid</name><est>2013,01,04</est><duration>130</duration><percentcompleted>0</percentcompleted><predecessortasks></predecessortasks><childtasks><task id="4"><name>Tarea de Ingrid</name><est>2013,01,04</est><duration>100</duration><percentcompleted>0</percentcompleted><predecessortasks></predecessortasks><childtasks></childtasks></task><task id="5"><name>Tarea de Ingrid</name><est>2013,01,04</est><duration>120</duration><percentcompleted>0</percentcompleted><predecessortasks></predecessortasks><childtasks></childtasks></task></childtasks></task><task id="6"><name>Actividad 2 de ingrid</name><est>2013,01,07</est><duration>146</duration><percentcompleted>0</percentcompleted><predecessortasks></predecessortasks><childtasks></childtasks></task><task id="7"><name>Actividad 2 de ingrid</name><est>2013,01,04</est><duration>654</duration><percentcompleted>0</percentcompleted><predecessortasks></predecessortasks><childtasks></childtasks></task><task id="8"><name>sdfghjk</name><est>2013,01,09</est><duration>24</duration><percentcompleted>0</percentcompleted><predecessortasks></predecessortasks><childtasks></childtasks></task><task id="9"><name>actividad p</name><est>2013,01,16</est><duration>123</duration><percentcompleted>0</percentcompleted><predecessortasks></predecessortasks><childtasks></childtasks></task></project><project id = "8" name= "completo" startdate = "2013,02,01"><task id="10"><name>completo</name><est>2013,02,02</est><duration>123</duration><percentcompleted>0</percentcompleted><predecessortasks></predecessortasks><childtasks></childtasks></task></project></projects>', false , true);
                myCalendar = new dhtmlXCalendarObject(["calendar","calendar1","calendar2","fechaFlujo"]);	
            }
            $(document).ready(function(){
                $("#tarea").change(function() {
                    $.ajax({
                            url: "AjaxEditTask",
                            type: "GET", 
                            dataType: "json",
                            data:{id : $("#tarea option:selected").attr("value")},
                            success: function(data) {
                                $("#porcentaje").attr('value',data.porcentaje);
                                $("#descripcion").attr('value',data.descripcion);
                            }
                        });
                });
            });
        </script>
    </head>
    <body onload="createChartControl('GanttDiv');" >
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="javascript:void(0);"><%=proyecto%></a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    Tareas<b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a data-toggle="modal" href="#editarTarea">Editar</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="nav-collapse collapse">
                        <ul class="nav pull-right">
                            <li>
                                <a href="#">Cambiar contrase&ntilde;a</a>
                            </li>
                            <li class="">
                                <a href="index.jsp">Salir</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="background:url('img/manuPet.png') no-repeat 400px -200px; height: 800px;"  >
            <div class="row-fluid" >
                <div class="span6 pull-left">
                    <div class="page-header" style="border: 0; color: black;">
                        <h1><%=nombre +" "+ apellido%> <small style="color: white;">colaborador</small></h1>
                    </div>
                </div>
                <div class="span6">
                    <div class="page-header" style="border: 0; color: black;">
                        <h1>Man&uuml; </h1>
                    </div>
                </div>
            </div>
            <div class="row-fluid" >
                <div class="span12">
                    <div class="hero-unit" >
                        <div id="GanttDiv" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <% if(request.getParameter("creado")!=null) { %>
        <div id="info" class="modal hide fade in">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Informaci&oacute;n</h3>
            </div>
            <div class="modal-body">
                <h1><%=request.getParameter("creado") %></h1>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-primary" data-dismiss="modal">Aceptar</a>
            </div>
        </div>
        <script>
            $('#info').modal({
                keyboard: true
            });
        </script>
        <% } %>
        
        
        
        <div id="editarTarea" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
                            <a class="close" data-dismiss="modal">×</a>
                            <h3>Editar Tarea</h3>
            </div>
            <div class="modal-body">
                <form action="ServletEditTask" class="form-horizontal">
                    <div class="control-group">
                    <label class="control-label">Tarea</label>
                        <div class="controls">
                            <select name="tarea" id="tarea">
                                <option>--Seleccione una Tarea</option>
                                <%
                                UsuarioVO vo = FacadeFactory.createFacade().Login(correo);
                                Collection<Tarea> tareas = vo.getTareaCollection();
                                Iterator itr = tareas.iterator();
                                while(itr.hasNext()) {
                                    Tarea t = (Tarea) itr.next();
                                %>
                                <option value="<%=t.getIdtarea() %>"><%=t.getNombre() %></option>
                                <%
                                }
                                
                                %>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                    <label class="control-label">Porcentaje</label>
                        <div class="controls">
                            <input name="porcentaje" id="porcentaje" type="number" min="0" max="100" step="1" value="" class="input-small" />
                        </div>
                    </div>
                    <div class="control-group">
                    <label class="control-label">Descripci&oacute;n</label>
                        <div class="controls">
                            <textarea id="descripcion" name="descripcion" rows="6" class="input-xlarge"></textarea>
                        </div>
                    </div>
                    <div class="form-actions">
                        <input class="btn btn-warning" type="submit" value="Actualizar">
                        <button class="btn btn-info" data-dismiss="modal">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>
